<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>修改</title>
  <link rel="stylesheet" href="../../static/css/bootstrap.4.3.1.min.js.css" th:href="@{/css/bootstrap.4.3.1.min.js.css}"/>
  <script th:src="@{/js/jquery-3.4.1.js}"></script>
  <link rel="stylesheet" href="../../static/css/layui.css" th:href="@{/css/layui.css}"/>
  <script th:src="@{/js/layui.js}"></script>
  <script th:src="@{/js/modules/layer.js}"></script>
  <style>
    li{
      list-style: none;
      margin: 15px;
    }
    .btn-block{
      width: 380px !important;
      margin: 0px 55px !important;
    }
  </style>
</head>
<body>
<div class="container">
  <h3 style="text-align: center">修改记录信息</h3>
  <form >
    <ul>
      <li>
        <input class="form-control" name="id" type="text" th:value="${usage.id}" readonly placeholder="ID">
      </li>
      <li>
        <input class="form-control" name="userId" type="text" th:value="${usage.getUserId()}" readonly placeholder="用户名">
      </li>
      <li>
        <input class="form-control" name="usageMonth" type="text" th:value="${usage.getUsageMonth()}" readonly placeholder="月份">
      </li>
      <li>
        <input class="form-control" name="perWaterPrice" type="text" th:value="${usage.perWaterPrice}" readonly placeholder="水费/吨">
      </li>
      <li>
        <input class="form-control" name="perElectricityPrice" type="text" th:value="${usage.perElectricityPrice}"  readonly placeholder="电价（元/度）">
      </li>
      <li>
        <input class="form-control" name="totalWaterUsage" type="text" th:value="${usage.totalWaterUsage}"   placeholder="用水量">

      </li>
      <li>
        <input class="form-control" name="totalElectricityUsage" type="text" th:value="${usage.totalElectricityUsage}"  placeholder="用电量">
      </li>
      <li>
        <input class="form-control" name="cost" type="text" th:value="${usage.cost}"  readonly placeholder="总费用">
      </li>
      <li>
        <input class="form-control" name="createdAt" type="text" th:value="${usage.createdAt}"  readonly placeholder="创建时间">

      </li>
      <li>
        <input class="form-control" name="updatedAt" type="text" th:value="${usage.updatedAt}"  readonly placeholder="更新时间">

      </li>
    </ul>
    <button class="btn btn-primary btn-lg btn-block" onclick="click456()">保存</button>
  </form>
</div>
<script>
  //点击保存按钮，ajax前后交互传递数据
  function click456(){
    debugger
    var userId=$("input[name='userId']").val();
    var usageMonth=$("input[name='usageMonth']").val();
    var perWaterPrice=$("input[name='perWaterPrice']").val();
    var perElectricityPrice=$("input[name='perElectricityPrice']").val();
    var totalWaterUsage=$("input[name='totalWaterUsage']").val();
    var totalElectricityUsage=$("input[name='totalElectricityUsage']").val();
    var cost=$("input[name='cost']").val();
    var createdAt=$("input[name='createdAt']").val();
    var updatedAt=$("input[name='updatedAt']").val();
    var id=$("input[name='id']").val();

    if(totalElectricityUsage==""){
      alert("用水量为空，请重新输入！")
    }else if(totalWaterUsage==""){
      alert("用电量为空，请重新输入！")
    }else if(usageMonth==""){
      alert("月份为空，请核对后重新输入！")
    }else {
      $.ajax({

        url: '/updateWater',//后台接口地址
        type:'get',
        dataType:'text',
        cache:false,
        async:false,
        data:{
          userId:userId,
          usageMonth:usageMonth,
          perWaterPrice:perWaterPrice,
          perElectricityPrice:perElectricityPrice,
          totalWaterUsage:totalWaterUsage,
          totalElectricityUsage:totalElectricityUsage,
          cost:cost,
          createdAt:createdAt,
          updatedAt:updatedAt,
          id:id
        },
        success:function (data) {
          debugger
          console.log(data.msg)
          debugger
          if(data=== "0"){
            alert("修改成功")
          }else{
            alert("修改失败")
          }
          parent.layer.closeAll();//关闭所有的弹窗
          parent.location.reload();
        },
        error:function () {
          alert("请求失败")
        }
      })
    }

  }
</script>
</body>
</html>